﻿<br />
<h2>Site Resources Manager</h2>
<br />
@(Html.Telerik().Grid<Century.Models.Common.CountrySiteResource>()
    .Name("Grid")
    .DataKeys(keys => keys.Add(c => c.Id))
        .ToolBar(commands =>
        {
            commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new { style = "margin-left:0" });
        })
    .Columns(columns =>
    {

        columns.ForeignKey(o => o.CountrySiteId, (System.Collections.IEnumerable)ViewBag.AccessibleSites, "Id", "Path");
        columns.Bound(o => o.OrderNo);
        columns.ForeignKey(o => o.TypeId, (System.Collections.IEnumerable)ViewBag.ResourceTypes, "Id", "TypeName");
        columns.Bound(o => o.Title);
        columns.Bound(o => o.Path);
        columns.Bound(o => o.IsActive);
        columns.Bound(o => o.ThumbnailPath).Hidden();
        columns.Bound(o => o.Description);

        columns.Command(command =>
        {
            command.Edit().ButtonType(GridButtonType.Image);

        }).Width(50);
    })
            .ClientEvents(clientEvents =>
            {
                clientEvents.OnEdit("editClick");
            })
           .DataBinding(dataBinding => dataBinding.Ajax()
           .Select("GetCountrySiteResourceList", "SiteResources")
           .Update("EditCountrySiteResource", "SiteResources")
           .Insert("InsertCountrySiteResource", "SiteResources")
        )
       .Groupable()
       .Filterable()
       .Editable(editing => editing.Mode(GridEditMode.PopUp))
       .Sortable()
       .Pageable(pagingSetting => pagingSetting.PageSize(20))
       .Resizable(config =>
       {
        config.Columns(true);
       })
        .Reorderable(config =>
       {
        config.Columns(true);
       })
       .ColumnContextMenu()
       
)
<script type="text/javascript">

    function editClick(e) {
        $(e.form).closest(".t-window-content").width(600).height(650);
        var popup = $("#" + e.currentTarget.id + "PopUp");
        popup.css({ "left": ($(window).width() / 2 - $(popup).width() / 2) + "px", "top": ($(window).height() / 2 - $(popup).height() / 2) + "px" });
    }
</script>
<style type="text/css">
.editor-field .text-box
{
    width:590px;
}
</style>